<template>
    <div>
        <div id="myChart123" ref="leftChartOne" style="width:100%;height:180px"></div>

    </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'

onMounted(() => {
    echart()
})
const leftChartOne = ref()

let echart = () => {
    // let myChart = echarts.init(document.getElementById("myChart123"));

    let myChart = echarts.init(leftChartOne.value);
    // 绘制图表
    myChart.setOption({
        title: {
            // text: 'Stacked Line'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['2016', '2017', '2018', '2019', '2020'],
            axisTick: {
                show: true,    // 是否显示坐标轴刻度
                inside: true,     // 坐标轴刻度是否朝内，默认朝外
                length: 4,    // 坐标轴刻度的长度
            },
            axisLabel: {
                fontSize: '8',    // 文字字体大小
            },
        },
        yAxis: {
            type: 'value',
            show: false,
            axisLabel: {
                fontSize: '8',    // 文字字体大小
            },
            // splitLine: {
            //     show: false,    // 是否显示分隔线。默认数值轴显示，类目轴不显示
            // },
        },
        series: [
            {
                name: 'Email',
                type: 'line',
                color: '#27DFFF',
                stack: 'Total',
                data: [58, 220, 456, 134, 90]
            },
            {
                name: 'Union Ads',
                type: 'line',
                color: 'purple',
                stack: 'Total',
                data: [220, 58, 123, 234, 290]
            }
        ]
    });
    window.onresize = function () { // 自适应大小
        myChart.resize();
    };
}
</script>

<style></style>